<template>
    <div>
        <div class="wrapper" v-for="item of MovieList" :key="item.id">
            <div class="img-wrapper" >
            <img :src="item.imgUrl" class="img">
            </div>
            <p class="movie-id">ID：都是好电影</p>
        </div>
    </div>
</template>

<script>
export default {
  name: 'ClassifyMovielist',
  data () {
    return {
      MovieList: [{
        id: '0001',
        imgUrl: require('../../../assets/picture/2.jpg')
      },
      {
        id: '0002',
        imgUrl: require('../../../assets/picture/1.jpg')
      },
      {
        id: '0003',
        imgUrl: require('../../../assets/picture/3.jpg')
      },
      {
        id: '0004',
        imgUrl: require('../../../assets/picture/4.jpg')
      },
      {
        id: '0005',
        imgUrl: require('../../../assets/picture/5.jpg')
      },
      {
        id: '0006',
        imgUrl: require('../../../assets/picture/6.jpeg')
      },
      {
        id: '0007',
        imgUrl: require('../../../assets/picture/7.jpg')
      },
      {
        id: '0008',
        imgUrl: require('../../../assets/picture/8.jpg')
      }
      ]
    }
  }
}
</script>

<style lang="stylus"  scoped>
 @import '~styles/varibles.styl'
    .wrapper
      position relative
      float: left
      width:45%
      padding-bottom :65%
      margin-left:.25rem
      margin-top:.2rem
      background:yellow
      .img-wrapper
        position: absolute
        top: 0
        left: 0
        right: 0
        border-radius:.1rem
        border-style: solid
        overflow hidden
        .img
         width:100%
      .movie-id
        position: absolute
        height: .44rem
        color:blue
        line-height: .44rem
        margin-top :4.48rem
</style>
